<template>
  <div>
    <van-nav-bar fixed title="支付记录" left-arrow @click-left="$utils.back($route.path);" />
    <div class="has-top pos-r">
      <div class="head-bg-box bg-primary pos-a">
        <img class="pos-a bottom-0 right-0" :src="bgImg">
      </div>
      <div class="page-content-box pos-r">
        <datetime-filter
          :time-start-select="timeStartSelect"
          :time-end-select="timeEndSelect"
          @openDatetimeSelect="openDatetimeSelect"
          @onStartConfirm="onStartConfirm"
          @onEndConfirm="onEndConfirm"
          @close="close"
          @getData="getData"
        />
        <div class="flex-s-c plr-25 mt-60 mlr-25">
          <div class="flex flex-d-c color-white flex-1">
            <span class="fs-28">支付笔数</span>
            <span class="fs-64 fw-600">{{ OrderCount }}</span>
          </div>
          <div class="flex flex-d-c color-white flex-1">
            <span class="fs-28">支付金额</span>
            <span class="fs-64 fw-600">{{ TotalSale }}</span>
          </div>
        </div>
        <div class="contain pos-a bg-white full-width">
          <div class="mlr-25">
            <content-search
              :search-val="searchVal"
              placeholder="请输入商户名称/商户号"
              theme="1"
              @clear="clear"
              @getVal="getVal"
              @search="search"
            />
          </div>
          <record-list :list="recordList" img-size="74" type="pay" @openDetail="openDetail" />
          <no-data v-if="recordList.length === 0" />
          <p v-if="end===true&&recordList.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import contentSearch from 'components/contentSearch'
import recordList from 'components/recordList'
import datetimeFilter from 'components/datetimeFilter'
import noData from 'components/noData'
import bgImg from 'assets/images/cashList.png'
import { GetUserCashierPage, GetUserCashierTotal } from 'api/order'
export default {
  components: {
    contentSearch,
    recordList,
    datetimeFilter,
    noData
  },
  data() {
    return {
      bgImg,
      searchVal: undefined,

      // 时间选择框显示
      timeStartSelect: false,
      timeEndSelect: false,

      // 时间筛选
      datetime: {},
      GetUserCashierTotalRequest: {
        StartTime: null,
        EndTime: null
      },
      GetUserCashierPageRequest: {
        PageIndex: 1,
        PageSize: 10,
        StartTime: null,
        EndTime: null
      },

      // 统计数据
      OrderCount: 0,
      TotalSale: 0,
      PayWayTotalList: [],

      // 记录列表
      recordList: [],

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      end: false
    }
  },
  created() {
    this.GetUserCashierTotal()
    this.GetUserCashierPage()
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    search(value) {
      this.GetUserCashierPageRequest.SearchKey = value
      this.GetUserCashierPageRequest.PageIndex = 1
      this.recordList = []
      this.GetUserCashierPage()
    },
    clear() {
      this.searchVal = undefined
    },
    getVal(val) {
      this.searchVal = val
    },
    openDatetimeSelect() {
      this.timeStartSelect = true
    },
    onStartConfirm() {
      this.timeStartSelect = false
      this.timeEndSelect = true
    },
    onEndConfirm() {
      this.timeStartSelect = false
      this.timeEndSelect = false
    },
    close() {
      this.timeStartSelect = false
      this.timeEndSelect = false
    },
    getData(value) {
      this.scollRequest = true
      this.end = false
      this.clear()

      this.GetUserCashierTotalRequest.StartTime = value.startDate ? value.startDate.replace(/\./g, '-') : null
      this.GetUserCashierTotalRequest.EndTime = value.endDate ? value.endDate.replace(/\./g, '-') : null
      this.GetUserCashierTotal()

      this.GetUserCashierPageRequest.PageIndex = 1
      this.GetUserCashierPageRequest.SearchKey = undefined
      this.GetUserCashierPageRequest.StartTime = value.startDate ? value.startDate.replace(/\./g, '-') : null
      this.GetUserCashierPageRequest.EndTime = value.endDate ? value.endDate.replace(/\./g, '-') : null
      this.recordList = []
      this.GetUserCashierPage()
    },
    GetUserCashierTotal() {
      GetUserCashierTotal(this.GetUserCashierTotalRequest).then(res => {
        const RES = res.Data
        if (RES) {
          this.OrderCount = RES.OrderCount || 0
          this.TotalSale = RES.TotalSale || 0
          this.PayWayTotalList = RES.PayWayTotalList
        }
      })
    },
    GetUserCashierPage() {
      GetUserCashierPage(this.GetUserCashierPageRequest).then(res => {
        if (res) {
          if (res.Data.length && res.Data.length > 0) {
            res.Data.forEach(tem => {
              tem.Id = tem.ID
              this.recordList.push(tem)
            })
          }
          this.totalAmout = res.TotalAmout
          this.scollRequest = true
        }
      })
    },
    openDetail(id) {
      console.log(id)
      this.$router.push('/member/detail/' + id)
    },

    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (_this.$utils.getScrollHeight() - _this.$utils.getClientHeight() - _this.$utils.getScrollTop() <= 5) {
          _this.scollRequest = false
          if (_this.GetUserCashierPageRequest.PageIndex < _this.totalAmout) {
            _this.GetUserCashierPageRequest.PageIndex++
            _this.GetUserCashierPage()
          } else {
            _this.end = true
          }
          // }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.head-bg-box {
  height: 466px;
  border-radius: 0;
  img {
    width: 280px;
    height: 220px;
  }
}
.contain {
  top: 360px;
  min-height: calc(100% - 360px);
  border-radius: 24px 24px 0 0;
}
</style>
